<template>
  <view class="page">
    <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
      <u-form-item label="校历" prop="createTime" label-width="180" required>
        {{calModel.year}}年 第{{calModel.termName}}学期
      </u-form-item>
      <u-form-item label="历时" prop="createTime" label-width="180" required>
        {{calModel.startTime}} ~ {{calModel.endTime}}
      </u-form-item>
      <u-form-item label="事件名称" prop="eventName" label-width="180" required>
        <u-input placeholder="请输入事件名称" v-model="model.eventName" type="text" maxlength="64"
          :disabled="disabled"></u-input>
      </u-form-item>
      <u-form-item label="开始时间" prop="startTime" label-width="180" required count>
        <view v-if="disabled">
          {{model.startTime}}
        </view>
        <view v-else @click="startTimeShow = true" style="width: 100%;">
          <view>{{model.startTime==''?'请选择时间':model.startTime}}</view>
          <u-picker v-model="startTimeShow" mode="time" :params="params" @confirm="handleStartTimeConfirm"
            :disabled="disabled">
          </u-picker>
        </view>
      </u-form-item>
      <u-form-item label="结束时间" prop="endTime" label-width="180" required count>
        <view v-if="disabled">
          {{model.endTime}}
        </view>
        <view v-else @click="endTimeShow = true" style="width: 100%;">
          <view>{{model.endTime==''?'请选择时间':model.endTime}}</view>
          <u-picker v-model="endTimeShow" mode="time" :params="params" @confirm="handleEndTimeConfirm"
            :disabled="disabled">
          </u-picker>
        </view>
      </u-form-item>
      <u-form-item label="事件描述" prop="eventDesc" label-width="180">
        <u-input type="textarea" placeholder="请输入事件描述" v-model="model.eventDesc" height="100" maxlength="500"
          :disabled="disabled" />
      </u-form-item>
    </u-form>
    <view class="footer">
      <view class="form-button primary" @click="submit">保存</view>
      <view class="form-button" @click="cancel">取消</view>
    </view>
  </view>
</template>
<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  import calendar from '@/components/js-calendar/calendar.js'
  export default {
    data() {
      return {
        model: {
          id: '',
          calendarId: '',
          eventName: '',
          startTime: '',
          endTime: '',
          eventDesc: '',
        },
        calModel: {
          id: '',
          year: '',
          term: '',
          startTime: '',
          totalWeek: '',
          status: '1',
        },
        disabled: true,
        startTimeShow: false,
        endTimeShow: false,
        params: {
          year: true,
          month: true,
          day: true
        },
        popup: {
          show: false,
          mode: "bottom",
          multiple: false,
        },
        rules: {
          eventName: [{
            required: true,
            message: '请输入事件名称',
            trigger: ['change', 'blur'],
          }],
          startTime: [{
              required: true,
              message: '请选择开始时间',
              trigger: ['change', 'blur'],
            },
            {
              asyncValidator: (rule, value, callback) => {
                if (!calendar.dateBetween(value, this.calModel.startTime, this.calModel.endTime)) {
                  callback(new Error('时间在' + this.calModel.startTime + ' ~ ' + this.calModel.endTime + '范围内'));
                } else {
                  callback();
                }
              },
            },
          ],
          endTime: [{
              required: true,
              message: '请选择结束时间',
              trigger: ['change', 'blur'],
            },
            {
              asyncValidator: (rule, value, callback) => {
                if (!calendar.dateBetween(value, this.calModel.startTime, this.calModel.endTime)) {
                  callback(new Error('时间在' + this.calModel.startTime + ' ~ ' + this.calModel.endTime + '范围内'));
                } else {
                  callback();
                }
              },
            },
          ]
        },
      };
    },
    onLoad(params) {
      if (params.calendarId) {
        this.model.calendarId = params.calendarId;
      }
      this.$u.api.mis.misSchoolCalendar.detail({
        id: this.model.calendarId
      }).then(res => {
        Object.assign(this.calModel, res.data);
      });
      if (params.id) {
        this.$u.api.mis.misSchoolCalendarEvent.detail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
          if (this.hasPermission('misSchoolCalendarEvent_edit')) {
            this.disabled = false;
          }
        });
      } else {
        this.disabled = false;
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      submit() {
        let self = this;
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uni.showLoading({
              title: '提交中....'
            })
            this.$u.api.mis.misSchoolCalendarEvent.save(this.model).then(res => {
              uni.hideLoading();
              uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false,
                success: function() {
                  if (res.code == 200) {
                    uni.navigateTo({
                      url: 'index?calendarId=' + self.model.calendarId
                    });
                  }
                }
              });
            });
          } else {
            this.$u.toast('您填写的信息有误，请根据提示修正。');
          }
        });
      },
      cancel() {
        uni.navigateTo({
          url: 'index?calendarId=' + this.model.calendarId
        });
      },
      handleStartTimeConfirm(e) {
        this.model.startTime = e.year + '-' + e.month + '-' + e.day;
        this.startTimeShow = false;
      },
      handleEndTimeConfirm(e) {
        this.model.endTime = e.year + '-' + e.month + '-' + e.day;
        this.endTimeShow = false;
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    position: relative;
    height: 100vh;
    padding-bottom: 160rpx;
    background: #F7F7F7;
  }

  .form {
    padding: 24rpx;
  }

  .u-form-item {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;

    &::after {
      display: none;
    }
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 32rpx 24rpx;
    background: #f7f7f7;
  }

  .form-button {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #999;
    background: #fff;

    &.primary {
      color: #fff;
      background: #3989FC;
    }

    &+.form-button {
      margin-left: 24rpx;
    }
  }
</style>